<template>
	<!-- 附近门店 -->
	<view class="map-shop-wrapper">
		<MyNavbar title="附近门店" ></MyNavbar>
		
		<div style="width: 100%; height:0;flex: 1;">
			<map 
				id="map"
				ref="map"
				style="width: 100%; height: 100%;" 
				:scale="scale"
				:latitude="latitude" :longitude="longitude" :markers="shopList"
				:includePoints="includePoints"
			>
			</map>
		</div>
		
		<!-- 店铺列表 -->
		<div class="map-shop-list">
			<u-cell
				v-for="item in shopList"
				:title="item.shopName" is-link
				@tap="onClickItem(item)"
			>
				<div slot="label">
					<div>{{item.address}}</div>
					<div>电话：{{item.phone}}</div>
					<div>营业时间：{{item.busTime}}</div>
				</div>
				
			</u-cell>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: 29.53781,
				longitude: 106.510565,
				scale: 20,
				// 店铺列表
				shopList: [
					{
						id: "s1",
						shopName: '二刀劉男士理发馆(时代天街店)',
						iconPath: '/static/shop-building.png',
						callout: {
							content: '二刀劉男士理发馆(时代天街店)',
							display: 'ALWAYS',
						},
						address: '重庆市渝中区大坪正街龙湖时代汇5栋2楼',
						phone: '18080468011',
						busTime: '周一至周日 11:00-21:00',
						latitude: 29.53781,
						longitude: 106.510565,
						width: 40,
						label: {
							content: '二刀劉男士理发馆(时代天街店)',
						 　	borderRadius:20,//边框圆角                        
						 　	bgColor:'white',//背景色
						 　	padding:5,//文本边缘留白
							textAlign:'center', //文本对齐方式。
							display: 'ALWAYS',
						},
					},
					{
						id: "s2",
						shopName: '二刀劉男士理发馆(观音桥店)',
						iconPath: '/static/shop-building.png',
						callout: {
							content: '二刀劉男士理发馆(观音桥店)',
							display: 'ALWAYS',
						},
						address: '重庆市江北区北城天街四号北岸星座17-5',
						busTime: '周一至周日 10:00-21:30',
						phone: '19923169162 13330830537',
						latitude: 29.576863,
						longitude: 106.532131,
						width: 40,
						label: {
							content: '二刀劉男士理发馆(观音桥店)',
							borderRadius:20,//边框圆角
						　	bgColor:'white',//背景色
						　	padding:5,//文本边缘留白
							textAlign:'center', //文本对齐方式。
							display: 'ALWAYS',
						},
					},
				],
			}
		},
		computed: {
			// shopList
			includePoints(){
				return this.shopList;
			},
		},
		methods: {
			// 点击店铺
			onClickItem(item){
				console.log("点击店铺: ", item);
				let mapCtx = uni.createMapContext('map', this);
				console.log("mapCtx", mapCtx);
				mapCtx.moveToLocation ({
					longitude: item.longitude,
					latitude: item.latitude,
				});
			},
		}
	}
</script>

<style scoped>
	.map-shop-wrapper{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
	}
	
	.map-shop-list{
		width: 100%;
		height: 440rpx;
		overflow: auto;
		background-color: #FFFFFF;
	}
</style>
